<template>
	<div class="board0 pannel">
		<div class="plan-type">
			<div class="type-title">计划类型</div>
			<div class="type-content">
				<div class="line">
					<div :class="{active: planTypeIndex == 1}" @click="planTypeIndex = 1">
						<i class="el-icon-alarm-clock"></i>
						<span>定时型-单次</span>
						<span v-if='planTypeIndex == 1' class="check"><i class="el-icon-check"></i></span>
					</div>
					<div :class="{active: planTypeIndex == 2}" @click="planTypeIndex = 2">
						<i class="el-icon-alarm-clock"></i>
						<span>定时型-重复</span>
						<span v-if='planTypeIndex == 2' class="check"><i class="el-icon-check"></i></span>
					</div>
				</div>
				<div class="line">
					<div :class="{active: planTypeIndex == 3}" @click="planTypeIndex = 3">
						<i class="el-icon-thumb"></i>
						<span>触发型-完成A</span>
						<span v-if='planTypeIndex == 3' class="check"><i class="el-icon-check"></i></span>
					</div>
					<div :class="{active: planTypeIndex == 4}" @click="planTypeIndex = 4">
						<i class="el-icon-thumb"></i>
						<span>触发型-完成A 未完成B</span>
						<span v-if='planTypeIndex == 4' class="check"><i class="el-icon-check"></i></span>
					</div>
				</div>
			</div>
		</div>

		<div class="trigger-time">
			<div class="trigger-time-title">触发时间</div>
			<div class="trigger-time-content">
				<template v-if="planTypeIndex == 1">
					<span>在</span>
					<el-date-picker v-model="triggerDate" type="date" placeholder="选择日期" style="width: 138px;"
						value-format='yyyy-MM-dd'>
					</el-date-picker>
					<el-time-select v-model="triggerDateTime" placeholder="选择时间" style="width: 100px;">
					</el-time-select>
					<span>对受众用户进行触达</span>
				</template>
				<template v-if="planTypeIndex == 2">
					<el-select v-model="frequency" placeholder="请选择" style="width: 130px;">
						<el-option v-for="item in ['每周','每月','每天']" :key="item" :label="item" :value="item">
						</el-option>
					</el-select>
					<el-time-select v-model="triggerTime" placeholder="选择时间" style="width: 100px;">
					</el-time-select>
				</template>
			</div>
		</div>

		<div class="event-A" v-if="[3,4].indexOf(planTypeIndex) !== -1">
			<div class="event-A-title">
				<span><i class="el-icon-arrow-up"></i></span>
				<span>完成事件 A 后</span>
				<span class="add-btn" @click="addEventA">
					<i class="el-icon-circle-plus"></i>
					添加事件
				</span>
			</div>
			<div class="event-A-content">
				<div class='out-line' v-if="eventA.length > 1"><span>或</span></div>
				<div class="event-item" v-for="(event, index) in eventA">
					<div class="main-event">
						<el-select v-model="event.value" placeholder="请选择" style="width: 130px;">
							<el-option v-for="item in eventList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
						<span class="add-filter" @click="addFilter(event)"><i class="el-icon-plus"></i>筛选条件</span>
						<span class="close-btn" v-if="index !== 0"><i class="el-icon-close"
								@click="handleClose(eventA, index)"></i></span>
					</div>
					<div class="attach-condition" v-if="event.condition.length !== 0">
						<div class="statement">
							<div class="tips">并且满足</div>
							<div class="line"></div>
						</div>
						<div class="connection">
							<div class="brace-line">
								<button>并</button>
							</div>
							<div class="condition-item" v-for="(condition, conditionIndex) in event.condition">
								<!-- <el-select v-model="value" placeholder="请选择" style="width: 130px;">
									<el-option v-for="item in ['每周','每月','每天']" :key="item.value"
										:label="item.label" :value="item.value">
									</el-option>
								</el-select>
								<el-select v-model="value" placeholder="请选择" style="width: 130px;">
									<el-option v-for="item in ['每周','每月','每天']" :key="item.value"
										:label="item.label" :value="item.value">
									</el-option>
								</el-select> -->


								<!-- <el-select v-model="eventItem.eventType" value-key="id">
									<el-option v-for="dict in allEventItemListOpts[eventItem.eventType]" :key="dict.id"
										:label="dict.eventItemName" :value="dict" />
								</el-select> -->

								<el-select v-model="eventItem.eventType" style="width:120px;margin-right: 10px;"
									@change="eventTypeChange(queryParams.initRuleTypes, index)">
									<el-option v-for="dict in eventTypeOptions" :key="dict.id" :value="dict.id" />
								</el-select>
								<el-select v-model="eventItem.eventItem" style="width:120px;margin-right: 10px;"
									value-key="id">
									<el-option v-for="dict in allEventItemListOpts[eventItem.eventType]" :key="dict.id"
										:value="dict" />
								</el-select>
								<el-select v-model="eventItem.eventItemExpression"
									style="width:120px;margin-right: 10px;">
									<el-option v-for="dict in  eventPropertysOptions[eventItem.eventItem.valueType]"
										:key="dict.id" :label="dict.eventItemExpression" :value="dict.eventItemCode" />
								</el-select>
								<el-input style="width: 160px;"></el-input>
								<i class="el-icon-close" @click="handleClose(event.condition, conditionIndex)"></i>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="and" v-if="planTypeIndex == 4">
			<span>且在</span>
			<el-input-number style="width: 130px;" v-model="timeSlotNum" controls-position="right"
				@change="handleChange" :min="1" :max="10"></el-input-number>
			<el-select v-model="timeSlotUnit" placeholder="请选择" style="width: 130px;">
				<el-option v-for="item in ['分钟','小时','天']" :key="item" :label="item" :value="item">
				</el-option>
			</el-select>
			<span>内</span>
		</div>

		<div class="event-A eventB" v-if="planTypeIndex == 4">
			<div class="event-A-title">
				<span><i class="el-icon-arrow-up"></i></span>
				<span>完成事件 A 后</span>
				<span class="add-btn" @click="addEventA">
					<i class="el-icon-circle-plus"></i>
					添加事件
				</span>
			</div>
			<div class="event-A-content">
				<div class='out-line' v-if="eventA.length > 1"><span>或</span></div>
				<div class="event-item" v-for="(event, index) in eventB">
					<div class="main-event">
						<el-select v-model="event.value" placeholder="请选择" style="width: 130px;">
							<el-option v-for="item in eventList" :key="item" :label="item" :value="item">
							</el-option>
						</el-select>
						<span class="add-filter" @click="addFilter(event)"><i class="el-icon-plus"></i>筛选条件</span>
						<span class="close-btn" v-if="index !== 0"><i class="el-icon-close"
								@click="handleClose(eventA, index)"></i></span>
					</div>
					<div class="attach-condition" v-if="event.condition.length !== 0">
						<div class="statement">
							<div class="tips">并且满足</div>
							<div class="line"></div>
						</div>
						<div class="connection">
							<div class="brace-line">
								<button>并</button>
							</div>
							<div class="condition-item" v-for="(condition, conditionIndex) in event.condition">
								<el-select v-model="value" placeholder="请选择" style="width: 130px;">
									<el-option v-for="item in ['每周','每月','每天']" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
								<el-select v-model="value" placeholder="请选择" style="width: 130px;">
									<el-option v-for="item in ['每周','每月','每天']" :key="item.value" :label="item.label"
										:value="item.value">
									</el-option>
								</el-select>
								<el-input style="width: 160px;"></el-input>
								<i class="el-icon-close" @click="handleClose(event.condition, conditionIndex)"></i>
							</div>
						</div>

					</div>
				</div>
			</div>
		</div>

		<div class="reach-time" v-if="[3,4].indexOf(planTypeIndex) !== -1">
			<span>则</span>
			<el-select v-model="reachTimeType" placeholder="请选择" style="width: 130px;">
				<el-option v-for="item in ['立即','延迟',]" :key="item" :label="item" :value="item">
				</el-option>
			</el-select>
			<template v-if="reachTimeType == '延迟'">
				<el-input-number style="width: 130px;" v-model="reachTimeNum" controls-position="right"
					@change="handleChange" :min="1" :max="10"></el-input-number>
				<el-select v-model="reachTimeUnit" placeholder="请选择" style="width: 130px;">
					<el-option v-for="item in ['分钟','小时','天']" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</template>
			<span>对受众用户进行触达</span>
		</div>

		<div class="start-end-time" v-if="planTypeIndex !== 1">
			<div class="start-end-time-title">
				起止时间
			</div>
			<div class="start-end-time-content">
				<el-date-picker v-model="startDate" type="date" placeholder="选择日期" style="width: 140px;">
				</el-date-picker>
				<el-time-select v-model="startTime" placeholder="选择时间" style="width: 130px;">
				</el-time-select>
				<span>至</span>
				<el-date-picker v-model="endDate" type="date" placeholder="选择日期" style="width: 140rpx;">
				</el-date-picker>
				<el-time-select v-model="endTime" placeholder="选择时间" style="width: 130px;">
				</el-time-select>
			</div>
		</div>
		<div class="restriction" v-if="planTypeIndex !== 1">
			<div class="restriction-title">参与限制</div>
			<div class="restriction-content">
				<div>
					<el-radio v-model="limitType" :label="1">参与1次</el-radio>
					<el-radio v-model="limitType" :label="2">参与多次</el-radio>
				</div>
				<div v-if="limitType == 1">
					当前计划，同一用户仅参与一次
				</div>
				<template v-else-if="limitType == 2">
					<div class='restriction-content-item'>
						<span>同一个用户</span>
						<el-input-number style="width: 130px;" v-model="limitTimeSlot" controls-position="right"
							@change="handleChange" :min="1" :max="10">
						</el-input-number>
						<span>天内，最多参与</span>
						<el-input-number style="width: 130px;" v-model="limitTimes" controls-position="right"
							@change="handleChange" :min="1" :max="10">
						</el-input-number>
						<span>次</span>
					</div>
					<div>提示： 当用户退出计划后，才可再次计入</div>
				</template>
			</div>
		</div>

	</div>

</template>

<script>
import { getTriggerType, formatTime, formatDate } from '../utils.js'
import { allEventItemsOptions, eventItemsOptions, eventTypeOptions } from "@/api/config/item";
import { listAllPropertyResult, listPropertyByType } from "@/api/config/property";
import { getAllEventMethodResult } from "@/api/config/emethod";

export default {
	name: "board0",


	data() {
		return {
			queryParams: {
				initRuleTypes: [],
			},
			eventItemsOptions: [],
			planTypeIndex: 1,
			triggerTime: '',
			timeSlotNum: '1',
			timeSlotUnit: '分钟',
			reachTimeType: '立即',
			reachTimeNum: '',
			reachTimeUnit: '分钟',
			triggerDate: '',
			triggerDateTime: '',
			// triggerDateTime: {
			// 	date: formatDate(),
			// 	time: '09:00',
			// },
			eventA: [
				{
					value: '',
					condition: [],
				},
			],
			// and: {
			// 	timeSlotNum: null,
			// 	timeSlotUnit: '',
			// },
			eventB: [
				{
					value: '',
					condition: [],
				},
			],
			eventTypeOptions: [],
			allEventItemListOpts: {},
			eventPropertysOptions: {},
			eventItem: {
				eventType: '',
				eventItem: {},
				eventItemExpression: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			},
			// reachTime: {
			// 	type: '',
			// 	timeSlotNum: null,
			// 	timeSlotUnit: '',
			// },
			// startEndTime: {
			// 	startDate: null,
			// 	startTime: '',
			// 	endDate: null,
			// 	endTime: '',
			// },
			startDate: null,
			startTime: '',
			endDate: null,
			endTime: '',
			frequency: '每天',
			timeSlot: {
				num: null,
				unit: '',
			},
			// participationLimit: {
			// 	type: 1,
			// 	rate: {
			// 		timeSlot: null,
			// 		unit: '天',
			// 		times: 1
			// 	}
			// },
			limitType: '',
			limitTimeSlot: '',
			limitUnit: '',
			limitTimes: '',
			eventList: [
				'事件A',
				'事件B',
				'事件C',
				'事件D',
			],
		}
	},
	computed: {
		form() {
			return {
				planTypeIndex: this.planTypeIndex,
				triggerDate: this.triggerDate,
				triggerDateTime: this.triggerDateTime,
				frequency: this.frequency,
				triggerTime: this.triggerTime,
				eventA: this.eventA,
				reachTimeType: this.reachTimeType,
				reachTimeNum: this.reachTimeNum,
				reachTimeUnit: this.reachTimeUnit,
				startDate: this.startDate,
				startTime: this.startTime,
				endDate: this.endDate,
				endTime: this.endTime,
				limitType: this.limitType,
				limitTimeSlot: this.limitTimeSlot,
				limitTimes: this.limitTimes,
				eventB: this.eventB,
				timeSlotNum: this.timeSlotNum,
				timeSlotUnit: this.timeSlotUnit,
			}
		}
	},
	created() {
		this.getEventTypeList();
		this.getAllEventItemsList();
		console.log(this.$store.state.optionList.OptionList)
	},
	watch: {
		form(newval) {
			this.$emit('board0', newval)
		}
	},
	methods: {
		eventTypeChange(array, index) {
			array[index].eventItem = {};
			array[index].eventItemExpression = '';
			array[index].value1Str = '';
			array[index].value2Str = '';
		},
		getAllEventItemsList() {
			allEventItemsOptions().then(response => {
				this.allEventItemListOpts = response.data;
				// console.log(this.allEventItemListOpts)
			});
			listAllPropertyResult().then(response => {
				this.eventPropertysOptions = response.data;
			});
			getAllEventMethodResult().then(response => {
				this.allEventItemMethodOpts = response.data;
			});
		},
		getEventTypeList() {
			var param = { status: 'Y' };
			console.log(param)
			eventTypeOptions(param).then(response => {
				this.eventTypeOptions = response.data;
				console.log(this.eventTypeOptions)
			});
		},


		addEventA() {
			console.log(this.eventA)
			this.eventA.push({
				value: '',
				condition: [],
			})
		},

		addFilter(event) {
			let eventItem = {
				eventType: '',
				eventItem: {},
				eventItemExpression: '',
				valueType: '',
				value1Str: '',
				value2Str: '',
			};
			event.condition.push(eventItem)
		},

		handleClose(list, index) {
			console.log(list)
			list.splice(index, 1)
		},
	}

};

</script>

<style lang="scss">
.board0 {

	&>* {
		margin-bottom: 25px;
	}

	.plan-type {
		display: flex;

		.type-title {
			width: 144px;
		}

		.line {
			display: flex;
			margin-bottom: 20px;

			&>div {
				padding: 0 20px;
				border: 1px solid #d3dce6;
				border-radius: 4px;
				margin-right: 20px;
				min-width: 173px;
				height: 48px;
				line-height: 48px;
				cursor: pointer;
				position: relative;

				&:hover {
					border-color: #04cb94;
				}

				&>i {
					margin-right: 8px;
				}

				.check {
					position: absolute;
					display: block;
					top: -1px;
					right: 0;
					width: 0;
					height: 0;
					border-top: 20px solid #04cb94;
					border-left: 23px solid transparent;

					i {
						position: absolute;
						top: -20px;
						left: -13px;
						color: #fff;
						font-size: 12px;
						transform: scale(.85);
					}
				}
			}

			&>.active {
				color: #04cb94;
				border-color: #04cb94;
			}
		}
	}

	.trigger-time {
		display: flex;
		align-items: center;

		.trigger-time-title {
			width: 144px;
		}

		.trigger-time-content {
			&>* {
				margin-right: 10px;
			}
		}
	}

	.event-A {
		width: 100%;
		background-color: #F5F8FC;
		box-sizing: border-box;
		padding: 18px 15px;

		.event-A-title {
			display: flex;
			align-items: center;
			position: relative;

			i {
				margin-right: 6px;
				font-size: 16px;
			}

			.add-btn {
				position: absolute;
				right: 0;
				cursor: pointer;

				&>i {
					color: #04cb94;
				}
			}
		}

		.event-A-content {
			position: relative;
			padding-left: 25px;

			.out-line {
				height: 100%;
				width: 0;
				border: 1px solid #D6EFE8;
				margin-right: 10px;
				position: absolute;
				left: 10px;

				&>span {
					position: absolute;
					top: 50%;
					transform: translate(-50%, -50%);
					display: block;
					height: 25px;
					line-height: 25px;
					width: 25px;
					background-color: #D6EFE8;
					border-radius: 3px;
					color: #04cb94;
					text-align: center;
				}
			}

			.event-item {
				margin-left: 20px;
				margin-top: 20px;

				.main-event {
					height: 42px;
					position: relative;

					&>* {
						margin-right: 16px;
					}

					.add-filter {
						cursor: pointer;
					}

					&>.close-btn {
						position: absolute;
						right: 0;
						top: 50%;
						transform: translateY(-50%);
						font-size: 20px;
					}
				}

				.attach-condition {
					position: relative;

					.statement {
						position: absolute;
						left: 25px;
						height: 100%;
						width: 110px;
						display: flex;
						align-items: center;

						.line {
							border: 1px solid #04cb94;
							margin-left: 16px;
							height: 100%;

						}
					}

					.connection {
						margin-left: 135px;
						margin-top: 16px;
						position: relative;

						.brace-line {
							width: 40px;
							position: absolute;
							top: 50%;
							transform: translateY(-50%);
							display: flex;
							flex-direction: column;
							height: calc(100% - 40px);
							justify-content: center;
							border: 1px solid #D3DCE6;
							border-right: none;

							button {
								background-color: #FFFFFF;
								border: 1px solid #D3DCE6;
								height: 32px;
								line-height: 32px;
								width: 32px;
								text-align: center;
								transform: translateX(-50%);
								border-radius: 3px;
								color: #333;

								&:hover {
									border-color: #04cb94;
									color: #04cb94;
								}
							}

							&>div {
								width: 32px;
							}
						}
					}

					.condition-item {
						display: flex;
						margin-left: 40px;
						align-items: center;
						margin-top: 10px;

						&>* {
							margin-right: 12px;
						}
					}

				}
			}
		}
	}

	.and {
		&>* {
			margin-right: 10px;
		}
	}

	.reach-time {
		&>* {
			margin-left: 10px;
		}
	}

	.start-end-time {
		display: flex;

		.start-end-time-title {
			width: 144px;
		}

		.start-end-time-content {
			&>* {
				margin-right: 10px;
			}
		}
	}

	.restriction {
		display: flex;

		.restriction-title {
			width: 144px;
		}

		.restriction-content {
			&>div {
				margin-bottom: 16px;
			}

			.restriction-content-item {
				&>* {
					margin-right: 10px;
				}
			}
		}
	}
}
</style>
